<template>
	<view class="app-container">
		<view class="info" @click="goPath('info')">
			<image class="avarar" :src="user.avatar ? user.avatar : defaultAvatar"></image>
			<view class="info-content">
				<view class="nickname">{{user.nickname}}</view>
				<view class="phone">
					<text>手机号：{{user.username}}</text>
					<view>
						<image src="../../static/images/code-small.png"></image>
						<image src="../../static/images/right-arr.png"></image>
					</view>
				</view>
				<view class="say">说点啥吧...</view>
			</view>
		</view>
		<Cell title="朋友圈">
			<template v-slot:left>
				<image class="icon" src="../../static/images/circle.png"></image>
			</template>
		</Cell>
		<Cell title="收藏">
			<template v-slot:left>
				<image class="icon" src="../../static/images/collect.png" ></image>
			</template>
		</Cell>
		<Cell title="设置" @click.native="goPath('setting')">
			<template v-slot:left>
				<image class="icon" src="../../static/images/setting.png" ></image>
			</template>
		</Cell>
	</view>
</template>

<script>
	import Cell from '../../components/cell.vue'
	import {getUser} from '../../utils/auth.js'
	export default {
		components:{
			Cell
		},
		data() {
			return {
				user:{},
				defaultAvatar:require("../../static/images/avatar.png")
			}
		},
		onLoad() {
			this.user = getUser()
		},
		methods: {
			goPath(url){
				uni.navigateTo({
					url:`/pages/mine/${url}`
				})
			}
		}
	}
</script>

<style>
	.info{
		background-color: #fff;
		display: flex;
		align-items: flex-start;
		padding: 20px 0;
		margin-bottom: 20px;
	}
	.avarar{
		width: 50px;
		height: 50px;
		border-radius: 5px;
		overflow: hidden;
		margin: 0 20px;
	}
	.info-content{
		flex: 1;
		margin-right: 20px;
	}
	.nickname{
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.phone{
		margin-bottom: 10px;
		color: #bfbfbf;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
	}
	.phone image{
		width: 14px;
		height: 14px;
		margin-left: 10px;
	}
	.say{
		color: #bfbfbf;
		font-size: 14px;
	}
	

</style>
